<template lang="">
    <div>
      <el-table
        v-loading='loading'
        :data="DispatchOrderList"
        row-key="id"
        :row-class-name="tableRowClassName"
        border
      >
        <el-table-column
          v-for="(item, index) in col"
          :key="`col_${index}`"
          :prop="item.prop"
          :label="item.label"
        >
          <template slot-scope="scope"  v-if="item.prop == 'field_name'">
              <span style="margin-left: 10px">{{
                scope.row[`${item.prop}`]
              }}</span>
        </template>

          <template slot-scope="scope"  v-if="item.prop == 'is_show'">
         
              <span style="margin-left: 10px">{{
                scope.row[`${item.prop}`]
              }}</span>
           
          </template>
          <template slot-scope="scope"  v-if="item.prop == 'size'">
              <span style="margin-left: 10px">{{
                scope.row[`${item.prop}`]
              }}</span>
          </template>
          
          <template slot-scope="scope"  v-if="item.prop == 'sort'">
             <span style="margin-left: 10px">{{scope.row[`${item.prop}`]}}</span>
          </template>  

        </el-table-column>


      </el-table>
    </div>
  </template>
  <script>
  import { getInvoicesList,setInvoicesSort } from "@/api/product/index";
  import Sortable from "sortablejs";
  export default {
    data() {
      return {
        pagination: {
          per_page: 10,
          page: 1,
        },
        oldIndex: null,
        newIndex: null,
        total: 0,
        DispatchOrderList: [],
        col:[
          { label: "派单顺序", prop: "field_name" },
          { label: "是否展示", prop: "is_show" },
          { label: "字体大小", prop: "size" },
          { label: "排序", prop: "sort" }
        ],
        sort_arr:[],
        loading:true
      };
    },
    mounted() {
      this.get_DispatchOrderList();
      this.init();
    },
    methods: {
      get_DispatchOrderList() {
          this.sort_arr=[]
          getInvoicesList(this.pagination).then((res) => {
          if (res.code == 200) {
            this.DispatchOrderList = res.data;
            this.loading=false
            this.DispatchOrderList.forEach(item=>{
              let obj={
                  id:item.id,
                  sort:item.sort
              }
              this.sort_arr.push(obj) 
              }) 
          }
        });
        console.log( this.sort_arr)
      },
      set_DispatchOrder(arr){
          this.loading=true
          setInvoicesSort({
              sort_arr:arr
          }).then(res=>{
              if(res.code == 200) {
                  this.loading=false
                  this.get_DispatchOrderList() 
              }
          })
         
      },
      init(){
          const _this = this;	
          // 1. 获取拖拽元素的父元素
          // 因为使用的element的table 所以可直接获取tbody
          let el =  document.querySelector(".el-table__body-wrapper tbody");
          
          
          // 2. 创建并配置相关参数
          var sortable = new Sortable(el, {
              // 此处进行配置 及 回调函数的使用
              
              // 因为我的需求是只有按住手柄才能进行拖拽，故而设置此参数
              // handle:'.handle_move', // css选择器的字符串 若设置该值，则表示只有按住拖动手柄才能使列表单元进行拖动
              
              // 我的需求是行拖拽，所以该值设置为行class
              draggable:'.el-table__row', // 允许拖拽的项目类名	
              // 因为拖拽过程中不尽兴位置调整，所以就要记录拖拽行初始位置以及目标位置
              // 拖拽中 回调函数
               onMove(customEvent) {
                // 禁止在拖拽过程中交换位置
                // 可将初始位置及目标位置进行记录
                _this.oldIndex = customEvent.dragged.rowIndex; //  初始位置
                _this.newIndex = customEvent.related.rowIndex; // 目标位置
                return false;  // 不进行交换
                // 返回值有三个
                // return false; — for cancel
                // return -1; — insert before target
                // return 1; — insert after target
              },
              
              // 拖拽结束，调整位置
              onEnd() {
                // 在拖拽结束后，获取初始及目标位置
                const { newIndex, oldIndex } = _this;
                const currRow = _this.sort_arr.splice(oldIndex, 1)[0];
                _this.sort_arr.splice(newIndex, 0, currRow);
                console.log(_this.sort_arr)
                _this.newIndex = null;
                _this.oldIndex = null;
                let sort_arr= _this.sort_arr[newIndex].sort
  
                _this.sort_arr[newIndex].sort= _this.sort_arr[oldIndex].sort
                _this.sort_arr[oldIndex].sort= sort_arr
                
                
                console.log(_this.sort_arr)
                _this.set_DispatchOrder(_this.sort_arr)
  
  
              },
          })
      },
      // rowDrop() {
      //   const tbody = document.querySelector('.el-table__body-wrapper tbody')
      //   const _this = this
      //   Sortable.create(tbody, {
      //     onEnd({ newIndex, oldIndex }) {
  
      //        console.log('3333',newIndex,oldIndex) 
      //             if (newIndex == oldIndex) return
      //             _this.DispatchOrderList.splice(
      //                 newIndex,
      //                 0,
      //                 _this.DispatchOrderList.splice(oldIndex, 1)[0]
      //             )
      //             var newArray = _this.DispatchOrderList.slice(0)
      //             _this.DispatchOrderList = []
      //             _this.$nextTick(function () {
      //                 _this.DispatchOrderList = newArray
      //             })
      //     }
      //   })
      // },
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex == this.newIndex) {
               return "warning-row";
        }
        return "";
      }
    },
  };
  </script>
  <style  scoped>
  
  .el-table>>>.el-table__body-wrapper tbody {
    cursor: move;
  }
  .el-table>>>.warning-row {
    background: #1168b9 !important;
    color: #fff!important;
  }
  
  
  </style>
  